import React from 'react';
import { Card, Descriptions } from 'antd';
import SearchTable from '@/components/common/SearchTable';
import { connect } from 'dva';
import { getDicByKey } from '@/support/common';

import PropTypes from 'prop-types';
import MaskText from '@/components/MaskText';

@connect((state: any) => ({
  vehicleInfoQuery: state.vehicleInfoQuery,
  loading: state.loading.effects['vehicleInfoQuery/getDataWithRes'],
}))
export default class VehicleTab extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        vin: '',
        brandName: '',
        seriesName: '',
        styleName: '',
        styleId: '',
        colorName: '',
        licence: '',
        dealerName: '',
        pdsn: '',
        tbox: '',
        iccid: this.props.vehicleInfoQuery.iccid ? this.props.vehicleInfoQuery.iccid : '',
        createDate: '',
        availableDate: '',
        carSpt: '',
        enrollDate: '',
        vhlType: '',
      },
    };
  }
  componentDidMount() {
    this.getDetail();
  }
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  static contextTypes = {
    dicData: PropTypes.any,
  };

  onSource = (page, size, args) =>
    new Promise(async resolve => {
      const { vehicleInfoQuery } = this.props;

      const res = await this.props.dispatch({
        type: 'vehicleInfoQuery/getFetchPage',
        payload: {
          url: '/vehicle/vehicleactivaterecord',
          vin: vehicleInfoQuery.vin,
          ...args,
        },
      });

      if (res && res.statusCode === '0') {
        let a1 = 1;

        let arrayNew: any = [];
        res.data.map(item => {
          arrayNew.push(Object.assign({}, item, { sid: a1++ }));
        });

        resolve({
          // total: res.data.pagination.total,
          data: arrayNew,
        });
      } else {
        resolve({
          total: 0,
          data: [],
        });
      }
    });

  getDetail() {
    const { vehicleInfoQuery } = this.props;
    const { dispatch } = this.props;

    vehicleInfoQuery.vin
      ? dispatch({
          type: 'vehicleInfoQuery/getDataWithRes',
          payload: {
            url: '/vehicle/vehiclefinddetail',
            vin: vehicleInfoQuery.vin,
          },

          callback: response => {
            if (response && response.statusCode == '0' && response.data) {
              this.setState({
                data: Object.assign(this.state.data, response.data),
              });
            }
          },
        })
      : '';
  }
  render() {
    const { context } = this;
    const { data } = this.state;
    const { loading } = this.props;
    const { vehicleInfoQuery } = this.props;

    const columns = [
      {
        title: '序号',
        dataIndex: 'sid',
      },
      {
        title: '激活时间',
        dataIndex: 'activateTime',
      },
      {
        title: '激活类型',
        dataIndex: 'activateType',
        render: (text: any, record: any, index: any) => {
          return text ? getDicByKey(context.dicData, 'fenceVhlType', text.toString()) : '';
        },
      },
      {
        title: '申报人姓名',
        dataIndex: 'applyUserName',
        render(val: any) {
          return <MaskText text={val} type="name" />;
        },
      },
      {
        title: '性别',
        dataIndex: 'applySex',
        render: (text: any) => {
          return text ? getDicByKey(context.dicData, 'sex', text.toString()) : '';
        },
      },
      {
        title: '电话号码',
        dataIndex: 'phone',
        render(val: any) {
          return <MaskText text={val} type="phone" />;
        },
      },
      {
        title: '证件类型',
        dataIndex: 'certType',
        render: (text: any) => {
          return text ? getDicByKey(context.dicData, 'certType', text.toString()) : '';
        },
      },
      {
        title: '证件号码',
        dataIndex: 'certNum',
        render(val: any) {
          return <MaskText text={val} type="identity" />;
        },
      },
      {
        title: '联系地址',
        dataIndex: 'address',
      },
      {
        title: '是否二网车辆',
        dataIndex: 'isOwnToSecond',
        render: (text: any) => {
          return text === 'null' ? (text ? '是' : '否') : '';
        },
      },
      {
        title: '二网地址',
        dataIndex: 'secondUrl',
      },
      {
        title: '截止时间',
        dataIndex: 'expireTime',
      },
    ];
    return (
      <>
        <Card bordered={false} loading={loading}>
          <Descriptions bordered size="small" style={{ overflow: 'hidden' }}>
            <Descriptions.Item label="VIN码">{data.vin}</Descriptions.Item>
            <Descriptions.Item label="品牌">{data.brandName}</Descriptions.Item>
            <Descriptions.Item label="车系">{data.seriesName}</Descriptions.Item>
            <Descriptions.Item label="车型">{data.styleName}</Descriptions.Item>
            <Descriptions.Item label="车型编码">{data.styleId}</Descriptions.Item>
            <Descriptions.Item label="颜色">{data.colorName}</Descriptions.Item>
            <Descriptions.Item label="车牌号码">
              <MaskText text={data.licence} type="plate" />
            </Descriptions.Item>
            <Descriptions.Item label="经销商名称">{data.dealerName}</Descriptions.Item>
            <Descriptions.Item label="车机编号">{vehicleInfoQuery.pdsn}</Descriptions.Item>
            <Descriptions.Item label="TBOX编号">{vehicleInfoQuery.tbox}</Descriptions.Item>
            <Descriptions.Item label="ICCID">{data.iccid}</Descriptions.Item>
            <Descriptions.Item label="入库时间">{data.createDate}</Descriptions.Item>
            <Descriptions.Item label="销售时间">{data.availableDate}</Descriptions.Item>
            <Descriptions.Item label="网联类型">
              {data.carSpt && data.carSpt === '1' ? '手机' : '传统'}
            </Descriptions.Item>
            <Descriptions.Item label="激活时间">{data.enrollDate}</Descriptions.Item>
            <Descriptions.Item label="激活类型">
              {data.vhlType
                ? getDicByKey(context.dicData, 'fenceVhlType', data.vhlType.toString())
                : ''}
            </Descriptions.Item>
            <Descriptions.Item label=""></Descriptions.Item>
          </Descriptions>
        </Card>
        <Card title="激活历史记录" bordered={false}>
          <SearchTable
            tableProps={{
              rowKey: 'sid',
              scroll: { x: true },
              columns: columns,
              onSource: this.onSource,
            }}
          />
        </Card>
      </>
    );
  }
}
